<template>
    <div class="test-page">
        <div class="status">
            <el-divider content-position="left">答题状态</el-divider>
            <div class="flex item-center">
                <el-tag type="primary">完成进度：</el-tag>
                <el-progress style="width: 90%;margin-left:20px;" :percentage="percentage"></el-progress>
            </div>
        </div>
        <div class="desc">
            <el-divider content-position="left">答题说明</el-divider>
            <div v-html="paperInfo.explain_info"></div>
        </div>
        <div class="testlist">
            <el-divider content-position="left"></el-divider>
            <div class="textbox">
                <Question
                    :question="question"
                    :currentNum="currentNum"
                    :total="testList.length"
                    @changeUanswer="changeUanswer"
                ></Question>
            </div>
        </div>
        <div class="btns">
            <el-button type="primary" @click="preQuestion()" :disabled="currentNum == 1">上一题</el-button>
            <el-button type="primary"  @click="nextQuestion()" 
                v-if="currentNum != testList.length"
                :disabled="currentNum == testList.length">下一题</el-button>
            <el-button type="primary" @click="handleSubmitPaper()" v-if="currentNum == testList.length">交卷</el-button>
        </div>
    </div>
  </template>
  
  <script>
  import Exercise from './Exercise';
  import Question from '@/components/exam/Question'
  import Api from '@/api'

  export default {
    components: {
        Exercise,
        Question
    },
    props: {
        chapter: {
            type: Object,
            require: true,
            default: () => {
                return {}
            }
        }
        
    },
    mounted() {
        // this.initData()
    },
    data() {
        return {
            question: {},
            currentNum: 1,
            testList: [],
            paperInfo: {},
        }
    },
    computed: {
        percentage() {
            if (!this.testList.length) {
                return 0
            }
            let i = 0
            this.testList.forEach(item => {
                if (item.uanswer) {
                    i++
                }
            })
            return parseInt(i / this.testList.length * 100)
        },
    },
    methods: {
        preQuestion() {
            this.question = this.testList[--this.currentNum - 1]
        },
        nextQuestion() {
            this.question = this.testList[this.currentNum++]
        },
        initData() {
            this.getPaperInfo()
            this.getTestList()
        },
        // 获取试卷信息
        getPaperInfo() {
            Api.examPaperInfo({id: this.chapter.paper_id}).then(res => {
                this.paperInfo = res.data || {}
            })
        },
        handleSubmitPaper() {
            let i = 0 
            this.testList.forEach(item => {
                if (!item.uanswer) {
                    i++
                }
            })
            if (i > 0) {
                this.$confirm(`尚有${i}道题目未完成答题，是否确认交卷？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    
                }).then(() => {
                    this.submitPaper()
                }).catch(() =>{})
            } else {
                this.submitPaper()
            }
        },
        submitPaper() {
            Api.finishAnswer({
                id: this.question.id,
                paper_id: this.paperInfo.id
            })
        },

        // 获取试题
        getTestList() {
            Api.getExerciseList({
                paper_id: this.chapter.paper_id,
                obj_id: this.chapter.id
            }).then(res => {
                if (res.data.data[0].questionList && res.data.data[0].questionList.length) {
                    this.testList = res.data.data[0].questionList || []
                    this.question = this.testList[0] || {}
                    this.currentNum = 1
                    this.total = this.testList.length
                }
            })
        },

        changeUanswer(uanswer) {
            Api.uanswerinfo({
                id: this.question.id,
                question_id: this.question.question_id,
                uanswer
            }).then(res => {
                
            })
        }
    },
    watch: {
        chapter: {
            deep: true,
            handler(val) {
                this.initData()
            }
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .btns {
    margin-top: 20px;
  }
  </style>